<template>
  <div>
    <el-card class="box-1">
      <div slot="header"><span>产品详情</span></div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="名称：">{{ form.goods_name }}</el-form-item>
        <el-form-item label="略缩图：">
          <el-image :src="form['goods_pic']" :preview-src-list="[form['goods_pic']]" style="width: 178px;height: 178px;"/>
        </el-form-item>
        <el-form-item label="图片列表" prop="title">
          <ws-upload-multiple-img :disable="true" v-model="form['pic_list']" :path="form['pic_list_url']" :limit="3"/>
        </el-form-item>
        <el-form-item label="类型：" prop="goods_type">
          {{ form.goods_type_txt }}
        </el-form-item>
        <el-form-item label="原价：">{{ form.price }}</el-form-item>
        <el-form-item label="产品规格：">
          <el-table :data="form.goods_version" row-class-name="bg-gray" style="border:1px solid #ddd">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table :data="props.row.subitem">
                  <el-table-column label="子规格" min-width="160">
                    <template slot-scope="scope">
                      <el-tag type="info">{{ scope.row.goods_version }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="库存" prop="count" header-align="center" align="center"/>
                  <el-table-column label="原价" prop="originalPrice" header-align="center" align="center"/>
                  <el-table-column label="成本价" prop="costPrice" header-align="center" align="center"/>
                  <el-table-column label="售价" prop="salePrice" header-align="center" align="center"/>
                  <el-table-column label="货号" prop="goodsNum" header-align="center" align="center"/>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="规格名称" min-width="180">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.goods_version }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="图片" header-align="center" align="center">
              <template slot-scope="scope">
                <el-image :src="scope.row['image']" :preview-src-list="[scope.row['image']]" style="width: 60px;height: 60px;"/>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="代理商价格">
          {{ form.price_type===0?'默认' : '一口价' }}
        </el-form-item>
        <el-form-item label="状态">
          {{ form.status===0?'上架':'下架' }}
        </el-form-item>
        <el-form-item label="置顶权重">
          {{ form.goods_top }}
        </el-form-item>
        <el-form-item label="详情介绍">
          <div v-html="form['body']">{{ form['body'] }}</div>
        </el-form-item>
        <div style="text-align:center">
          <el-button v-if="queryMatch(17)" type="primary" @click="toModify()">编辑产品</el-button>
          <el-button type="primary" @click="$router.back(-1)">取消</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ImageUrl: this.$store.getters.serverUrl,
ImageUrl: '',

      // 产品类型列表
      productTypeList: [],

      // 商品详情
      form: {
        goods_name: '',
        goods_pic: '',
        pic_list: '',
        pic_list_url: [],
        goods_type: '',
        goods_version: [],
        price_type: '',
        status: '',
        goods_top: '',
        body: ''
      },
      formRules: {
        goods_name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        goods_type: [{ required: true, message: '请选择类型', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  mounted() {
    // this.expandAll()
    // this.title = this.$route.query.title
    // this.getProductTypeList()
  },
  created() {
    this.title = this.$route.query.title
    this.getProductTypeList()
  },
  methods: {
    // 获取产品类型列表
    getProductTypeList() {
      const url = 'goods/goodsTypeList'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.productTypeList = res.data
        if (this.$route.query.id) {
          this.id = this.$route.query.id
          this.getInfo(this.$route.query.id)
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    getInfo(id) {
      const url = 'goods/detail/' + id
      this.$store.dispatch('GetConnect', { url }).then(res => {
        const info = {
          id: res.data.id,
          goods_name: res.data.goods_name,
          goods_pic: res.data.goods_pic,
          pic_list: res.data.pic_list ? res.data.pic_list : '',
          pic_list_url: [],
          goods_type: res.data.goods_type,
          goods_type_txt: res.data.goods_type_txt,
          goods_version: res.data.goods_version ? JSON.parse(res.data.goods_version) : [],
          price_type: res.data.price_type,
          status: res.data.status,
          goods_top: res.data.goods_top,
          body: res.data.body.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
        }
        this.form = info
        const temp = info.pic_list.split(',')
        for (const i in temp) {
          this.form.pic_list_url.push({ id: temp[i], url: this.ImageUrl + temp[i] })
        }
        this.expandAll()
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     * 跳转产品修改页面
     * title: 新增/修改
     * row: 当前点击的行的数据,为空时为新增
     */
    toModify() {
      this.isShow = false
      const query = { title: '编辑产品', id: this.form.id }
      this.$router.push({
        path: '/product/productList/modify',
        query: query
      })
    },

    // 展开所有规格
    expandAll() {
      const els = document.getElementsByClassName('el-table__expand-icon')
      this.$nextTick(() => {
        for (let i = 0; i < els.length; i++) {
          els[i].click()
        }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;

  > div >div >span {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
  }

  .el-form {
    max-width: 900px;

    .title {
      font-weight: 600;
    }

    .remark {
      font-size: 13px;
      color: $textGray;
    }

    > div > .el-button {
      @extend .bg-green;
      width: 20%;
      min-width: 160px;
    }
  }
}
</style>
